<template>
  <el-dialog
    title="导入文件"
    append-to-body
    :visible.sync="dialogVisible"
    width="450px"
  >
    <el-form :model="importForm" ref="importForm" :rules="rules">
      <el-form-item label-width="70px" label="账期：" prop="acctYear">
        <el-date-picker
          v-model="importForm.acctYear"
          type="year"
          size="small"
          placeholder="选择账期"
          value-format="yyyy"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label-width="70px" label="标题：" prop="title">
        <el-input
          v-model="importForm.title"
          autocomplete="off"
          placeholder="请输入标题"
          maxlength="50"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="70px" label="说明：" prop="explain">
        <el-input
          size="medium"
          v-model="importForm.explain"
          autocomplete="off"
          placeholder="请输入说明"
          maxlength="200"
          type="textarea"
          resize="none"
        ></el-input>
      </el-form-item>
      <el-form-item label="上传文件">
        <el-upload
          :limit="1"
          accept=".xls, .xlsx"
          class="avatar-uploader"
          ref="upload"
          :auto-upload="false"
          :file-list="fileList"
          :on-change="changeFile"
          :on-remove="changeFile"
          action
        >
          <el-button size="mini" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>

    <div slot="footer">
      <div class="dialog-footer">
        <el-button size="mini" type="primary" @click="handle_import"
          >确定</el-button
        >
        <el-button size="mini" @click="dialogVisible = false">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { getCookie } from "@/common/js/cookie";
import { $budgetAPI } from "@/api";
export default {
  data(){
    return {
      dialogVisible: false,
      importForm: {
        acctYear: "",
        title: "",
        explain: "",
      },
      rules: {
        acctYear: [{required: true, message: '必填', trigger: "blur"}],
        title: [{required: true, message: '必填', trigger: "blur"}],
        explain: [{required: true, message: '必填', trigger: "blur"}],
      },
      fileList: [],
    }
  },
  methods: {
    init(){
      this.$refs.importForm.resetFields();
      this.fileList = [];
      this.$refs.upload.clearFiles();
    },
    // 导入
    async handle_import() {
      await this.$refs["importForm"].validate();
      if (this.fileList.length == 0) {
        this.$message.warning("请选择需要上传的文件");
        return false;
      }
      const loading = this.$loading({
        lock: true,
        text: '导入中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      let formData = new FormData();
      formData.append("explain", this.importForm.explain);
      formData.append("token", getCookie("token"));
      formData.append("acctYear",this.importForm.acctYear);
      formData.append("title", this.importForm.title);
      this.fileList.forEach(it => {
        formData.append("file", it.raw);
      })
      $budgetAPI.importBudgetData(
        formData,
        (res) => {
          this.alertError(res);
          if (res.code == 0) {
            this.$message.success("导入成功");
            this.$emit("refresh");
            this.dialogVisible = false;
            this.init();
          }
          loading.close();
        },
        (err) => {
          this.alertError(err);     
          loading.close();       
        }
      );
    },
    // 批量导入上传文件传递数据
    changeFile(file, fileList) {
      this.fileList = fileList;
    },
  }
}
</script>